<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_图书管理_获取数据</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        :root {
            font-size: 15px;
        }

        body {
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <!-- 栅格系统 -->
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <h1>图书管理</h1>
            <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal" id="myAddBtn">添加</button>
        </div>
        <table class="table table-bordered table-striped table-dark table-hover text-center">
            <thead>
                <!-- 表头行 -->
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">书名</th>
                    <th scope="col">作者</th>
                    <th scope="col">出版社</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <!-- 表格中的每一行 -->
                <tr>
                    <th scope="row">xxx</th>
                    <td>xxx</td>
                    <td>xxx</td>
                    <td>xxx</td>
                    <td>
                        <button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                        <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- add Modal  添加弹框-->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加图书</h5>
                    <button id="addCloseBtn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addForm" class="p-3">
                        <!-- 书名 -->
                        <div class="mb-3">
                            <label class="form-label">书名</label>
                            <input type="text" class="form-control" placeholder="请输入图书名称"
                                name="bookname" />
                        </div>
                        <!-- 作者 -->
                        <div class="mb-3">
                            <label class="form-label">作者</label>
                            <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
                        </div>
                        <!-- 出版社 -->
                        <div class="mb-3">
                            <label class="form-label">出版社</label>
                            <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称"
                                name="publisher" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="addBtn">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!-- edit Modal 修改弹框-->
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm" class="p-3">
                        <input name="id" hidden id="bookId"/>
                        <!-- 书名 -->
                        <div class="mb-3">
                            <label class="form-label">书名</label>
                            <input type="text" id="bookname" class="form-control" placeholder="请输入图书名称"
                                name="bookname" />
                        </div>
                        <!-- 作者 -->
                        <div class="mb-3">
                            <label class="form-label">作者</label>
                            <input type="text" id="author" class="form-control" placeholder="请输入作者名字" name="author" />
                        </div>
                        <!-- 出版社 -->
                        <div class="mb-3">
                            <label class="form-label">出版社</label>
                            <input type="text" id="publisher" class="form-control" placeholder="请输入出版社名称"
                                name="publisher" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="editBtn">确认</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <script>
        const addModal = new bootstrap.Modal('#addModal')
        const editModal = new bootstrap.Modal('#editModal')
        console.log(addModal)
        // 删除
        // 事件委托
        // <tbody id="tbody">
        document.querySelector('#tbody').addEventListener('click', (e) => {
            // 判断是否是删除按钮被点击
            // 条件：事件源上有类：btn-delete
            if(e.target.className === 'btn btn-link btn-sm btn-delete'){
                // console.log('删除..')
                // 拿到当前要删除的书的id？
                // console.dir(e.target.dataset.id)
                const id = e.target.dataset.id
                axios({
                    url: 'http://ajax-api.itheima.net/api/books/' + id,
                    method: 'DELETE'
                }).then(res => {
                    // 重发请求
                    render()
                })
            } else if(e.target.className === 'btn btn-link btn-sm btn-update'){
                const id = e.target.dataset.id
                axios({
                    url: `http://ajax-api.itheima.net/api/books/${id}`,
                    method: 'GET'
                }).then(res => {
                    console.log(res)
                    // 显示弹框
                    editModal.show()

                    // 赋值-数据回填
                    document.querySelector('#bookId').value = res.data.data.id
                    document.querySelector('#author').value = res.data.data.author
                    document.querySelector('#bookname').value = res.data.data.bookname
                    document.querySelector('#publisher').value = res.data.data.publisher
                })
            }
        })

        // 查询并显示
        function render(){
            axios({
                url: 'http://ajax-api.itheima.net/api/books',
                method: 'GET'
            }).then(res => {
                // console.log(res.data.data)
                const books = res.data.data
                // 显示图书
                // 对books 循环，它其中的每一个对象对应一个tr
                    // <tr>
                    //     <th scope="row">xxx</th>
                    //     <td>xxx</td>
                    //     <td>xxx</td>
                    //     <td>xxx</td>
                    //     <td>
                    //         <button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                    //         <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                    //     </td>
                    // </tr>
                let str = ''
                books.forEach(ele => {
                    str += `
                        <tr>
                            <th scope="row">${ele.id}</th>
                            <td>${ele.bookname}</td>
                            <td>${ele.author}</td>
                            <td>${ele.publisher}</td>
                            <td>
                                <button type="button" data-id="${ele.id}" class="btn btn-link btn-sm btn-delete">删除</button>
                                <button type="button" data-id="${ele.id}" class="btn btn-link btn-sm btn-update">编辑</button>
                            </td>
                        </tr>
                    `
                })
                // console.log(str)
                // 显示
                document.querySelector('#tbody').innerHTML = str
            })
            
        }

        render()

        // 添加
        document.querySelector('#addBtn').addEventListener('click', () => {
            // alert(1)
            // 1. 收集数据
            const result = serialize(document.querySelector('#addForm'), {hash: true})
            console.log(result)
            // 2. 发请求
            axios({
                url: 'http://ajax-api.itheima.net/api/books',
                // mothod: 'POST', // 没有设置method,默认值就是get
                method: 'POST',
                data: result
            }).then(res => {
                // 关闭弹框
                // 方式1：模拟点击事件
                // document.querySelector('#addCloseBtn').click()
                // 方式2: 使用bootstrap模态弹自带的hide方法
                addModal.hide()

                // 更新页面
                render()
            })
        })

        // 保存编辑
        document.querySelector('#editBtn').addEventListener('click', () => {
            // alert(1)
            // id ?
            const d = serialize(document.querySelector('#editForm'), {hash: true})
            console.log(d)
            // 发请求
            axios({
                url: 'http://ajax-api.itheima.net/api/books/' + d.id,
                method: 'PUT',
                data: {
                    bookname: d.bookname,
                    author: d.author,
                    publisher: d.publisher
                }
            }).then(res => {
                // 编辑成功
                // 隐藏弹框
                editModal.hide()
                // 重发请求
                render()
            })
        })
        // setInterval(
        //     axios({
        //         url: 'http://ajax-api.itheima.net/api/books',
        //         method: 'POST', 
        //         data: {
        //             "bookname": "伟大的程序员"+Date.now(),
        //             "author": "黑马程序员",
        //             "publisher": "北京出版社"
        //         }
        //     }), 
        // 1000)

        </script>
</body>

</html>